<!-- 各种模块总和 -->
<template>
  <div class="control-manager">
    <MapSearch />

    <ToolBox @changeCampus="changeCampus" />
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="图层编辑">
        <LayerManager ref="layerManager" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="房间编辑" force-render>
        <DrawControl />
      </a-tab-pane>
      <a-tab-pane key="3" tab="服务测试" force-render>
        <LoadServer />
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import MapSearch from '../search/MapSearch.vue'
import LayerManager from '../layer/LayerManager.vue'
import DrawControl from '../draw/DrawControl.vue'
import ToolBox from '../menu/ToolBox.vue'
import LoadServer from '../server/LoadServer.vue'

const map = getCurrentInstance().proxy.$root.$map
const layerManager = ref(null)

const activeKey = ref('1')

onMounted(() => {
  console.log('总控件中的map', map)
})

const changeCampus = (schValue) => {
  console.log('schValue', schValue)
  layerManager.value.loadLayerJson(schValue)
}

</script>

<style lang="scss" scoped>
.control-manager{
  position: fixed;
  top: 150px;
  left: 50px;
  width: 335px;
  background: hsla(0, 0%, 100%, 0.9);
  :deep(.ant-tabs-nav-wrap){
    padding-left: 16px;
  }
}
</style>
